<template>
    <div class="map-panel eagle-view eagleview-pos-absolute">
        <div
            v-show="ifshow"
            id="hawkEye2dMap"
            class="eagle-view__map event"
            ref="eagleRef" />
        <div class="eagle-view__bar event">
            <div class="opacity-bar"></div>
            <div class="expand-btn" @click="ifshow = !ifshow">
                <i
                    :class="[
                        ifshow
                            ? 'iconfont icon-bottom-right'
                            : 'iconfont icon-top-left',
                    ]" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import HawkEye2DMap from './EagleView'
import _ from 'lodash'

const props = defineProps<{
    viewer: Cesium.Viewer
}>()

const eagleRef = ref<HTMLElement>()

function loadData() {
    const hawkEyeMap = new HawkEye2DMap(props.viewer, {
        element: eagleRef.value!,
    })

    hawkEyeMap._init()
}

const ifshow = ref(false)

onMounted(() => {
    setTimeout(() => {
        loadData()
    }, 300)
})
</script>
<style lang="scss" scoped>
.eagleview-pos-absolute {
    z-index: 0 !important;
    position: absolute;
    bottom: 22px;
    right: 170px;
    width: 200px;
    height: 120px;
}
.eagle-view {
    // width: 100%;
    // height: 100%;
    &__map {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid #2d57a7;
    }
    &__bar {
        position: absolute;
        width: 100%;
        height: 30px;
        bottom: 0;
        display: flex;
        align-items: center;
        .opacity-bar {
            flex: 1;
            padding: 0 16px;
            :deep(.el-slider) {
                .el-slider__runway {
                    height: 4px;
                    background-color: #181818;
                }
                .el-slider__bar {
                    height: 4px;
                    background-color: #0e78fe;
                }
                .el-slider__button {
                    width: 11px;
                    height: 11px;
                    background-color: #72b0ff;
                    border: none;
                }
            }
        }
        .expand-btn {
            height: 30px;
            width: 30px;
            cursor: pointer;
            background-color: #2d57a7;
            border: 1px solid #2d57a7;
            border-radius: 0px 0px 1px 0px;
            text-align: center;
            i {
                line-height: 30px;
                font-weight: 700;
            }
        }
    }
}
</style>
